import BackButton from "@/components/BackButton";
import LoadingIcon from "@/components/LoadingIcon";
import NavTab from "@/components/NavTab";
import { useToastError } from "@/hooks/useToast";
import EventBus from "@/utils/EventBus";
import React, { Fragment, Suspense, useEffect } from "react";
import { Outlet, useLocation, useNavigate } from "react-router-dom";
export default function App() {
  const nav = useNavigate();
  const error = useToastError();
  const { pathname } = useLocation();
  // 将来我们会在这个地方做一个路由的拦截
  // react的路由拦截是基于 路由的访问路径的
  // 目前我们的路由配置，是所有的需要登录后才能访问的路由都是经过当前这个App组件的
  // 所以我们在这进行判断
  let token = localStorage.getItem("token");
  useEffect(() => {
    if (!token) {
      // 提示用户
      error("请先登录");
      // 强制跳转到login
      nav("/login");
    } else if (token && pathname == "/") {
      nav("/home");
    }
  });

  // 在这里进行 统一错误处理的 订阅
  EventBus.on("catch_err", (res?: IServerResponse<any>) => {
    error(res?.message!);
    // 如果是登录失效
    if (res?.errCode === 1002) {
      // 清除token ， Subjects - 只要是跟当前用户相关的缓存，都清除
      localStorage.removeItem("token");
      sessionStorage.removeItem("subjects");
      // 跳转到登录页
      nav("/login");
    }
  });
  if (token) {
    return (
      <>
        {/* fallback 是用来显示，在加载中的一个效果的 */}
        <Suspense fallback={<LoadingIcon />}>
          {/* 这部分的组件都是使用了懒加载的，必须使用 Sumpense 组件包起来 */}
          <Outlet />
        </Suspense>
        <NavTab />
        <BackButton />
      </>
    );
  } else {
    return <></>;
  }
}
